<div kendo-window="winCreateVirtualRouterOffering__" k-visible="false" k-options="winCreateVirtualRouterOfferingOptions__">
    <div class="row">
        <div class="col-sm-15">
            <div class="tab-content">
                <div id="createVirtualRouterOfferingInfo" class="tab-pane active">
                    <div class="alert alert-warning col-sm-21" ng-show="!infoPage.hasZone()">
                        {{ "virtualRouterOffering.addVirtualRouterOffering.ALERT1.1" | translate }}<a href="/#/zone">{{ "virtualRouterOffering.addVirtualRouterOffering.ALERT1.2" | translate }}</a>{{ "virtualRouterOffering.addVirtualRouterOffering.ALERT1.3" | translate }}
                    </div>
                    <div class="alert alert-warning col-sm-21" ng-show="!infoPage.hasL3Network() && infoPage.hasZone()">
                        {{ "virtualRouterOffering.addVirtualRouterOffering.ALERT2" | translate }}
                    </div>
                    <div class="alert alert-warning col-sm-21" ng-show="!infoPage.hasImage()">
                        {{ "virtualRouterOffering.addVirtualRouterOffering.ALERT3.1" | translate }}<a href="/#/image">{{ "virtualRouterOffering.addVirtualRouterOffering.ALERT3.2" | translate }}</a>{{ "virtualRouterOffering.addVirtualRouterOffering.ALERT3.3" | translate }}
                    </div>
                    <div class="clearfix"></div>
                    <h4 class="z-win-h4">{{ "virtualRouterOffering.addVirtualRouterOffering.CREATE VIRTUAL ROUTER OFFERING" | translate }}</h4>
                    <form class="form" id="formCreate">
                        <div class="form-group col-sm-24">
                            <label for="zone">{{ "virtualRouterOffering.addVirtualRouterOffering.ZONE" | translate }}</label>
                            <select id="zone" kendo-drop-down-list k-options="zoneOptions__" class="z-win-dropdown" ng-model="infoPage.zoneUuid"></select>
                        </div>
                        <div class="form-group col-sm-21">
                            <label for="name">{{ "virtualRouterOffering.addVirtualRouterOffering.NAME" | translate }}</label>
                            <input class="form-control" type="text" id="name" placeholder="(Required) max length of 255 characters" ng-model="infoPage.name" required data-message="name is required">
                        </div>
                        <div class="form-group col-sm-21">
                            <label for="description">{{ "virtualRouterOffering.addVirtualRouterOffering.DESCRIPTION" | translate }}</label>
                            <textarea  class="form-control" rows="5" id="description" placeholder="(Optional) max length of 2048 characters" ng-model="infoPage.description"></textarea>
                        </div>
                        <div class="form-group col-sm-21">
                            <label for="cpunum">{{ "virtualRouterOffering.addVirtualRouterOffering.CPU NUM" | translate }}</label>
                            <input type="text" class="form-control" id="cpunum" placeholder="CPU number" ng-model="infoPage.cpuNum">
                            <div class="alert alert-danger col-sm-21" ng-show="!infoPage.isCpuNumValid()">
                                {{ "virtualRouterOffering.addVirtualRouterOffering.ALERT4" | translate }}
                            </div>
                        </div>
                        <div class="form-group col-sm-21">
                            <label for="memory">{{ "virtualRouterOffering.addVirtualRouterOffering.MEMORY" | translate }}</label>
                            <input type="text" class="form-control" id="memory" placeholder="can be suffixed with T/G/M/K, default is byte, e.g. 512M" ng-model="infoPage.memorySize">
                            <div class="alert alert-danger col-sm-21" ng-show="!infoPage.isMemoryValid()">
                                {{ "virtualRouterOffering.addVirtualRouterOffering.ALERT5" | translate }}
                            </div>
                        </div>
                        <div class="form-group col-sm-24">
                            <label for="image">{{ "virtualRouterOffering.addVirtualRouterOffering.IMAGE" | translate }}</label>
                            <select id="image" kendo-drop-down-list k-options="imageOptions__" class="z-win-dropdown" ng-model="infoPage.imageUuid"></select>
                        </div>
                        <div class="form-group col-sm-24">
                            <label for="mgmtL3">{{ "virtualRouterOffering.addVirtualRouterOffering.MANAGEMENT L3 NETWORK" | translate }}</label>
                            <select id="mgmtL3" kendo-drop-down-list k-options="mgmtL3Options__" class="z-win-dropdown" ng-model="infoPage.managementNetworkUuid"></select>
                        </div>
                        <div class="form-group col-sm-24">
                            <label for="pubL3">{{ "virtualRouterOffering.addVirtualRouterOffering.PUBLIC L3 NETWORK" | translate }}</label>
                            <select id="pubL3" kendo-drop-down-list k-options="pubL3Options__" class="z-win-dropdown" ng-model="infoPage.publicNetworkUuid"></select>
                        </div>
                        <div class="form-group col-sm-24">
                            <label for="allocator">{{ "virtualRouterOffering.addVirtualRouterOffering.ALLOCATOR STRATEGY" | translate }}</label>
                            <select id="allocator" kendo-drop-down-list k-options="allocatorStrategyOptions__" class="z-win-dropdown" ng-model="infoPage.allocatorStrategy"></select>
                            <p class="z-hint">{{ "virtualRouterOffering.addVirtualRouterOffering.HINT1" | translate }}</p>
                        </div>
                        <div class="form-group col-sm-18">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" ng-model="infoPage.isDefault"> <strong>{{ "virtualRouterOffering.addVirtualRouterOffering.DEFAULT OFFERING" | translate }}</strong>
                                </label>
                            </div>
                            <p class="z-hint">{{ "virtualRouterOffering.addVirtualRouterOffering.HINT2" | translate }}</p>
                        </div>
                    </form>
                </div>

                <div class="form-group col-sm-21">
                    <button type="button" class="btn btn-primary" ng-disabled="!button.canNextProceed()" ng-click="button.nextClick()">{{button.nextButtonName()}}</button>
                </div>
            </div>
        </div>

        <div class="col-sm-7">
            <div class="z-wizard-bar">
                <ul class="nav">
                    <li class="active"><a data-target="#createVirtualRouterOfferingInfo" ng-click="button.pageClick('createVirtualRouterOfferingInfo')">{{ "virtualRouterOffering.addVirtualRouterOffering.VIRTUAL ROUTER OFFERING INFO" | translate }}</a></li>
                </ul>
            </div>
        </div>

    </div>
</div>